<template>
	<div class="header">
		<router-link tag="div" to='/' class="header-break" v-show='showHeaderBreak'>
			<i class="iconfont">&#xe65b;</i>
		</router-link >
		<div class="header-title" v-show='!showHeaderBreak' :style='opacityStyle'>
			景区详情
		</div>
	</div>
</template>
<script>
	export default{
		name:'DetailHeader',
		data(){
			return{
				showHeaderBreak:true,
				opacityStyle:{
					opacity:0
				}
			}
		},
		mounted  () {
		  window.addEventListener('scroll', this.handleScroll)
		},
		destroyed () {
		  window.removeEventListener('scroll', this.handleScroll)
		},
		methods:{
			handleScroll(){
				const top = document.documentElement.scrollTop;
				if(top>60){
					let opacity = top/110
					opacity = opacity>1?1:opacity
					this.opacityStyle={opacity}
					this.showHeaderBreak=false
				}else{
					this.showHeaderBreak = true
				}
			}
		}
	}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/global.styl'
	.header{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: .8rem
		z-index: 2;
		font-size: .36rem;
		text-align: center;
		color: #fff;
	}
	.header-break{
	    position: absolute;
	    font-size: .36rem;
		left: .1rem;
	    top: .1rem;
	    width: .72rem;
	    height: .72rem;
	    line-height: .72rem;
	    width: .72rem;
	    height: .72rem;
	    background-color: #000;
	    border-radius: 1rem;
	    opacity: .5;
	}
	.iconfont{
	    font-weight: bold;
	}
	.header-title{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: .88rem;
		width: 100%;
		line-height: .88rem;
		z-index: 99;
		background-color: $bgColor
	}
</style>